C5 Javascript

Client-side Scripting Languages Introduction to Javascript

Plan du course Javascript – Pourquoi?, Ou?, Qu-est ce que c’est? Comment ajouter Javascript au HTML La syntaxe du Javascript Document Object Model Exemples

Javascript – Pourquoi?, Ou?, Qu-est ce que c’est? Au début – simple texte + images + liens Des pages “live” ont été nécessaires sur le web Netscape a invente “LiveScript” en 1995 LiveScript a change le nom plus tard en Javascript Javascript – fonctionne sur des navigateurs, permet de l'accès dynamique à la page html Le langage a été interprété dans un façon différent de navigateurs différents

Include Javascript into HTML Script inclus dans la page html <script type=”text/javascript”> //code script </script> Script inclus dans un fichier extérieur <script src=”fisier_surse.js”></script>

Quand est le code exécuté Si le tag “script” est inclus dans le tag “head” Le script est exécuté lorsque la page est chargée - avant de rendre Si le script est inclus dans le corps page Le script est exécuté lorsque le balisage est

Syntaxe du Javascript Similaire avec C & Java Les variables n’ont pas du type Les variables sont déclaré en utilisant le mot “var” var x=5, y=7; Les fonctions sont déclaré en utilisant le mot “function” function sum(x,y) { var rez=x+y; return rez;} Les fonctions sont appelées comme en C/Java var suma=sum(2,5);

Les objets du Javascript Les objets ont des methodes (fonctions) Proprietes Exemple var student={nom: "ion", an:2, notes:{mate:9, pc:8}}; alert(student.nom +"<br>" ); alert(student.an +"<br>");

References pour les objets du Javascript Math http://www.w3schools.com/jsref/jsref_obj_math.asp String http://www.w3schools.com/jsref/jsref_obj_string.asp Array http://www.w3schools.com/jsref/jsref_obj_array.asp Date http://www.w3schools.com/jsref/jsref_obj_date.asp

Examples <script type="text/javascript"> function printValue() //declare a function { var x=Math.random()*10; //compute the value of x as a random value between 0 and 10 alert(x); //display an alert containing the value of x var y="a random text"; //create a variable of type string alert(y.length); //display an alert containing the length of y //!!! length is a property and not a method alert(y.substr(0,5)); //compute and display as an alert the substring of y between the first and the 5 th character alert(x+" "+y.length+" "+y.substr(5,y.length)); //display as an alert the string formed by x, length of y and the substring formed from the 5 th character of y until the last one } </script>

Javascript exemple - analyse “ +” est utilise pour aider les strings “ alert” est utilise pour afficher d’information pendant le développement. Il ne doit pas etre utilise en applications Les objets peuvent avoir des méthodes comme y.substr(0,5) et propriétés comme y.length

Evénements Les éléments du HTML peuvent détecter quand l’utilisateur a des interactions avec eux Exemples d’interactions Mouse over (mouse out) Click Key pressed Blur change Nous pouvons écrire du code Javascript pour traiter les interactions

Events examples <script type=“text/javascript”> function youClicked(element) {element.innerHTML="you clicked this element";} function youMousedOver() {alert("mouse over detected"); } </script> <h1 onclick="alert('youclicked');youClicked( this );" onmouseover="youMousedOver()"> Introduction dans la programmation web</h1>

Evénements Qu’est que c’est “this” Html element User interacts event1 event2 Event1 a une fonction javascript La fonction javascript doit savoir quel élément a modifier “ this” est la référence a l’objet qui doit être modifie

DOM DOM=Document Object Model DOM = une representation des elements de la page HTML

DOM The DOM tree contains nodes which can be Html elements Text The tree elements can be accessed By traversing the tree (See Data structures course) By accessing them directly by name (getElementsByTagName) By accessing them directly by id (getElementById) Addressing them directly (as in an array) The root of the DOM tree is the document

Methods and properties document.write(“text”) Adds the “text” to the given page If the page is finished loading it rewrites it Example <script type="text/javascript"> function printValue() { var x=Math.random()*10; alert(x); var y="a random text"; alert(y.length); alert(y.substr(0,5)); alert(x+" "+y.length+"!!!"+y.substr(5,y.length)); document.write(x+" "+y.length+"!!!"+y.substr(5,y.length)); } </script>

DOM Methods and properties getElementsByTagName Returns an array of elements with a given name The we need to know the position of the element we need to modify inside the array function modifySecondH1() { var headersArray=document.getElementsByTagName("h1"); //retrieves all the elements whose names are h1 //elements’ numbering in the array starts at 0 headersArray[1].innerHTML=Math.random()*5; }

DOM Methods and properties document.getElementById The most used method to access an element of a html page We have to be careful to set ids for the elements function modifyFirstH1() { //retrieve the element with the id h1id1 var h1Element=document.getElementById("h1id1"); //set the HTML value for the document h1Element.innerHTML="new title"; }

DOM objects methods and properties Direct access to the element Predefined collections Forms Links Images document.forms[0].username.value – accesses the first form in the document and sets the value property for the username input

Example – using javascript to validate forms When a form is submitted we need to validate it first on the client-side The form should be validated before submitting The event should be added to the submit button For example we want to check if 2 passwords have the same value and if the username is longer than 4 characters

Validate forms with Javascript – example (I) function validateForm(){ var usernameElement=document.getElementById("username"); var passwordElement=document.getElementById("password"); var rePasswordElement=document.getElementById("repassword"); if(passwordElement.value!=rePasswordElement.value || passwordElement.value.length==0) {alert("please make sure the password is entered the same twice");return;} if (usernameElement.value.length<4) {alert("please make sure the username is longer than 4 letters");return; } document.forms[0].submit(); }

Example of form validation with Javascript (II) <form action="script.php" method="POST"> nom d'utilisateur<input type="text" id="username" /><br/> mot de passe<input type="password" id="password" /> <br/> mot de passe encore une fois <input id="repassword" type="password"> <br/> <input type="button" value="send" onclick="validateForm();"/> </form>

Javascript debugging Firebug – extension for Firefox Allows debugging of scripts Step by step execution Adding breakpoints Watch expressions Visualize the DOM tree

C5 Javascript

Contenu connexe

Tendances

En vedette

Similaire à C5 Javascript

Plus de Vlad Posea

C5 Javascript